<template>
<div class="page-container">
    <div class="toolbar">
        <el-row>
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form :inline="true" :model="dataForm" label-width="120px" style="text-align:left;" ref="dataForm" :rules="dataFormRules" class="form">
                        <el-row style="margin-top: -20px;">
                            <el-divider content-position="center">
                                <span style="font-size:16px;font-weight:800">基本信息</span>
                            </el-divider>
                        </el-row>
                        <el-row class="search-input">
                            <el-form-item label="仓库编码：" prop="code">
                                <el-input v-model="dataForm.code" auto-complete="off" placeholder="请输入仓库编码"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库名称：" prop="name">
                                <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入仓库名称"></el-input>
                            </el-form-item>
                            <el-form-item label="外部编码：" prop="outCode">
                                <el-input v-model="dataForm.outCode" auto-complete="off" placeholder="请输入外部仓库编码"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库归属：" prop="ownerShip">
                                <el-radio v-model="dataForm.ownerShip" :label="1">自有</el-radio>
                                <el-radio v-model="dataForm.ownerShip" :label="2">第三方</el-radio>
                            </el-form-item>
                            <el-form-item label="仓库地址：" prop="ownerShip">
                                <v-distpicker :province="dataForm.addressProvinceName" @province="changeProvince" :city="dataForm.addressCityName" @city="changeCity" :area="dataForm.addressAreaName" @area="changeArea"></v-distpicker>
                            </el-form-item>
                            <el-form-item label="详细地址：" prop="addressDetail">
                                <el-input v-model="dataForm.addressDetail" auto-complete="off" placeholder="请输入仓库名称"></el-input>
                            </el-form-item>

                            <el-form-item label="仓库负责人：" prop="ownerName">
                                <el-input v-model="dataForm.ownerName" auto-complete="off" placeholder="请输入仓库负责人"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人电话" prop="ownerMobile">
                                <el-input v-model="dataForm.ownerMobile" auto-complete="off" placeholder="请输入负责人电话"></el-input>
                            </el-form-item>
                            <el-form-item label="是否对接WMS：" prop="isWms">
                                <el-radio v-model="dataForm.isWms" :label="1">是</el-radio>
                                <el-radio v-model="dataForm.isWms" :label="2">否</el-radio>
                            </el-form-item>
                            <el-form-item label="所属组织：" prop="deptName">
                                <el-select v-model="dataForm.deptName" placeholder="请选择所属组织">
                                    <el-option v-for="item in selectedOptionsData1" 
                                    :key="item.deptId" :label="item.storeName" 
                                    :value="item.deptId" style="width:100%" 
                                    :click="dataForm.deptId=item.deptId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="备注：" prop="remark">
                                <el-input type="textarea" v-model="dataForm.remark" auto-complete="off" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <!--按钮-->
                    <div class="tool-wrap">
                        <div>
                            <el-button-group>
                                <el-button type="primary" size="small" @click="saveOrUpdate()">保存</el-button>
                                <el-button :size="size" type="primary" @click.native="saveOrUpdateEnable()">保存并启用</el-button>
                                <el-button type="primary" size="small" @click="back()">取消</el-button>
                            </el-button-group>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import {
    mapState
} from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";
import {
    validatePhone
} from "@/utils/validate";
//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        jicTable,
        ThemePicker,
        LangSelector,
        VDistpicker,
        elTree
    },

    //2.2 数据初始化区
    data() {
        return {
            //2.2.1 公共数据初始化
            searchSize: "mini",
            size: "small",
            selectedOptionsData1: [], //商家列表数据
            provinceOptions: [],
            cityOptions: [],
            countryOptions: [],
            // 2.2.2 form 表单数据初始化
            dataForm: {
                id: null,
                code: null,
                name: null,
                outCode: null,
                ownerShip: null,

                addressProvinceId: null,
                addressCityId: null,
                addressAreaId: null,
                addressProvinceName: null,
                addressCityName: null,
                addressAreaName: null,

                addressDetail: null,
                ownerName: null,
                ownerMobile: null,
                isWms: null,
                deptObject: null,
                deptId: null,
                deptName: null,
                status: null,
                deleteFlag: 0
            },
            //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
            dataFormRules: {
                code: [{
                        required: true,
                        message: "请输入仓库编码",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 10,
                        message: "长度在 0 到 10 个字符",
                        trigger: "blur"
                    }
                ],
                name: [{
                        required: true,
                        message: "请输入仓库名称",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    }
                ],
                deptName: [{
                    required: true,
                    message: "请选择商家",
                    trigger: "blur"
                }, ],
            }
        };
    },

    mounted() {
        this.getDetail();
        this.listMerchant();
    },
    methods: {
        changeProvince(data) {
            this.dataForm.addressProvinceId = data.code;
            this.dataForm.addressProvinceName = data.value;
        },
        changeCity(data) {
            this.dataForm.addressCityId = data.code;
            this.dataForm.addressCityName = data.value;
        },
        changeArea(data) {
            this.dataForm.addressAreaId = data.code;
            this.dataForm.addressAreaName = data.value;
        },
        //查询商家数据
        listMerchant() {
            let this_ = this;
            this.utils.request.queryStoreDeptList({}, function (res) {
                if (res.code === "0000") {
                    this_.selectedOptionsData1 = res.data;
                }
            });
        },

        //2.请求列表数据
        getDetail() {
            let this_ = this;
            if (
                this.$route.params.id != null &&
                this.$route.params.id != "undefined"
            ) {
                let params = {};
                params.id = this.$route.params.id;
                this.utils.request.getMStoreDetail(params, function (res) {
                    if (res.code === "0000") {
                        this_.dataForm = res.data;
                    } else {
                        this_.$message({
                            message: "操作失败, " + data.msg,
                            type: "error"
                        });
                    }
                });
            }
        },

        // 3.重置搜索框条件
        resetForm() {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        //==========2.3.1 JavaScript 自定义方法区==========

        /**
         * 保存或修改实体仓
         */
        saveOrUpdate() {
            let this_ = this;
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        if (this_.dataForm.deptName != null && this_.dataForm.deptName != '' && this_.dataForm.deptName != undefined) {
                            this_.dataForm.deptId = this_.dataForm.deptName.split("^")[0]
                            this_.dataForm.deptName = this_.dataForm.deptName.split("^")[1]
                        }
                        let paramss = this_.dataForm;
                        this.utils.request.getByMerchantId(paramss, function (res) {
                            if (res.data.length != 0) {
                                let flag = 0;
                                res.data.forEach(element => {
                                    if (element.id != this_.dataForm.id) {
                                        flag = 1;
                                    }
                                });
                                if (flag == 1) {
                                    this_.$confirm('仓库编号或名称或该所属组织已经存在', '提醒', {
                                        cancelButtonText: '取消',
                                        confirmButtonText: '确定'
                                    })
                                } else {
                                    this_.utils.request.updateMStore(this_.dataForm, function (res) {
                                        if (res.code === "0000") {
                                            this_.$message({
                                                message: "操作成功",
                                                type: "success"
                                            });
                                            this_.back();
                                        } else {
                                            this_.$message({
                                                message: "操作失败",
                                                type: "error"
                                            });
                                        }
                                    });
                                }
                            } else if (res.data.length == 0) {
                                this_.utils.request.updateMStore(this_.dataForm, function (res) {
                                    if (res.code === "0000") {
                                        this_.$message({
                                            message: "操作成功",
                                            type: "success"
                                        });
                                        this_.back();
                                    } else {
                                        this_.$message({
                                            message: "操作失败",
                                            type: "error"
                                        });
                                    }
                                });
                            }
                        })
                    })
                }
            });
        },

        saveOrUpdateEnable() {
            let this_ = this;
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let paramss = this_.dataForm;
                        this.utils.request.getByMerchantId(paramss, function (res) {
                            if (res.data.length != 0) {
                                let flag = 0;
                                res.data.forEach(element => {
                                    if (element.id != this_.dataForm.id) {
                                        flag = 1;
                                    }
                                });
                                if (flag == 1) {
                                    this_.$confirm('仓库编号或名称或该所属组织已经存在', '提醒', {
                                        cancelButtonText: '取消',
                                        confirmButtonText: '确定'
                                    })
                                } else {
                                    this_.dataForm.status = 1;
                                    this_.utils.request.updateMStore(this_.dataForm, function (res) {
                                        if (res.code === "0000") {
                                            this_.$message({
                                                message: "操作成功",
                                                type: "success"
                                            });
                                            this_.back();
                                        } else {
                                            this_.$message({
                                                message: "操作失败",
                                                type: "error"
                                            });
                                        }
                                    });
                                }
                            } else if (res.data.length == 0) {
                                this_.dataForm.status = 1;
                                this_.utils.request.updateMStore(this_.dataForm, function (res) {
                                    if (res.code === "0000") {
                                        this_.$message({
                                            message: "操作成功",
                                            type: "success"
                                        });
                                        this_.back();
                                    } else {
                                        this_.$message({
                                            message: "操作失败",
                                            type: "error"
                                        });
                                    }
                                });
                            }
                        })
                    })
                }
            });
        },

        //返回上一页;
        back() {
            this.$router.push("../Pages/Store/MStoreList");
        }
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
